<template>
  <!-- 地址列表 -->
  <div class="address">
    <div class="back-nav-box">
      <back-nav left-arrow left-text="返回" title="地址列表"></back-nav>
    </div>
    <!-- 图片 -->
    <div class="my-img">
      <img class="auto-img" :src="imgUrl" alt />
    </div>
    <!-- 我的详情盒子 -->
    <div class="my-box">
      <div class="order-address">
        <van-address-list :list="list" default-tag-text="默认" @add="onAdd" @edit="onEdit" />
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import BackNav from "../components/BackNav.vue";

export default {
  name: "AddressList",
  components: {
    BackNav,
  },
  data() {
    return {
      //背景
      imgUrl:require('../assets/images/orderbg.png'),

      chosenAddressId: "1",
      //组件地址数据
      list: [
        {
          aid: "1",
          name: "张三",
          tel: "13000000000",
          address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
          isDefault: false,
        },
      ],
    };
  },
  computed: {
    //获取store中的编辑地址
    addressInfo() {
      return this.$store.state.addressInfo;
    },
    //获取store中的新增地址
    address() {
      return this.$store.state.addressAdd;
    }  
  },
  created() {

    this.addSite();
    this.addressAdd();
    this.addList();
  },
  methods: {
    // 新增地址按钮
    onAdd() {
      Toast("新增地址");
      this.$router.push({ name: "AddressAdd" });
    },
    // 编辑地址按钮
    onEdit(item, index) {
      Toast("编辑地址:" + index);
      this.$router.push({ name: "AddressEdit" });
    },
    // 获取编辑地址提交到store的数据
    addSite() {
      let addressInfo = this.addressInfo;
      for (let key in addressInfo) {
        if (key == "province") {
          addressInfo["address"] =
            addressInfo[key] +
            addressInfo["city"] +
            addressInfo["county"] +
            addressInfo["addressDetail"];
        }
      }
      this.list.push(addressInfo);
    },
    //获取新增地址数据
    addressAdd() {
      let addressInfos = this.address;
      for (let key in addressInfos) {
        if (key == "province") {
          addressInfos["address"] =
            addressInfos[key] +
            addressInfos["city"] +
            addressInfos["county"] +
            addressInfos["addressDetail"];
        }
      }
      this.list.push(addressInfos);
    },
    //提交list数据
    addList() {
      this.$store.commit('setList',this.list);
    }
  },
};
</script>

<style lang='less' scoped>
@import url("../assets/base.less");

.address {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f7f7f7;
  .back-nav-box {
    position: sticky;
    top: 0;
    color: @mainColor;
  }
  .my-img {
    width: 100%;
    height: 100px;
    background-color: @bg_Color;
  }
  .my-box {
    margin: 0 10px;
    padding: 10px;
    background-color: rgba(255, 255, 255);
    position: relative;
    top: -20px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  /deep/ .van-tag--danger {
    background-color: @mainColor;
  }
  /deep/ .van-button--danger {
    background-color: @mainColor;
    border: 0.02667rem solid @mainColor;
  }
  /deep/ .van-radio__icon .van-icon {
    display: none;
  }
  /deep/ .van-address-item {
    border-bottom: 1px solid #e8e8e8;
  }
}
</style>